<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery DOM 操作</title>
    <script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js">
    </script>
    <script>
        $(function () {
            $('#append').click(function () {
                $('#div1').append($('#span'))
            });
            $('#after').click(function () {
                $('#div2').after($('#span'))
            });
            $('#empty').click(function () {
                $('#ul').empty();
            });
            var $btn;
            $('#remove').click(function () {
                $btn = $('#btn').remove();
            });
            $('#resume').click(function () {
                $('#ul').after($btn);
            });
        })
    </script>
</head>
<body>
<span style="background-color : blue;color: red;" id="span">SPAN</span>
<div id="div1" style="background-color: gray;">DIV1</div>
<div id="div2" style="background-color: green;">DIV2</div>
<ul id="ul">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
<input id="btn" type="text" value="删除我"/>
<form>
    <fieldset>
        <legend>内部插入节点(插入子节点)</legend>
        <input type="button" value="append" id="append"/>
    </fieldset>
</form>
<form>
    <fieldset>
        <legend>外部插入节点(插入兄弟节点)</legend>
        <input type="button" value="after" id="after"/>
    </fieldset>
</form>
<form>
    <fieldset>
        <legend>删除节点</legend>
        <input type="button" value="删除所有子节点" id="empty"/>
        <input type="button" value="删除节点" id="remove"/>
        <input type="button" value="恢复节点" id="resume"/>
    </fieldset>
</form>
</body>
</html>
